<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>美团外卖 - 美食生鲜药品，30分钟送达</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#FF7D00", // 美团橙色
              secondary: "#16B57F", // 绿色（用于配送费减免等优惠标签）
              warning: "#FF4D4F", // 红色（用于促销、热卖等标签）
              light: {
                bg: "#F5F5F5",
                card: "#FFFFFF",
                text: "#333333",
                textSecondary: "#666666",
                textTertiary: "#999999",
                border: "#EEEEEE",
              },
              dark: {
                bg: "#121212",
                card: "#1E1E1E",
                text: "#FFFFFF",
                textSecondary: "#AAAAAA",
                textTertiary: "#666666",
                border: "#2C2C2C",
              },
            },
            fontFamily: {
              sans: ["PingFang SC", "Helvetica Neue", "Arial", "sans-serif"],
            },
            boxShadow: {
              card: "0 2px 8px rgba(0, 0, 0, 0.08)",
              "card-dark": "0 2px 8px rgba(0, 0, 0, 0.3)",
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-balance {
          text-wrap: balance;
        }
        .card-transition {
          transition: all 0.3s ease;
        }
      }
    </style>

    <style>
      /* 全局动画定义 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideUp {
        from {
          transform: translateY(20px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
      }

      .animate-fade-in {
        animation: fadeIn 0.5s ease forwards;
      }

      .animate-slide-up {
        animation: slideUp 0.5s ease forwards;
      }

      .animate-pulse-slow {
        animation: pulse 2s infinite;
      }

      /* 暗黑模式过渡动画 */
      html {
        transition: background-color 0.3s ease;
      }

      /* 骨架屏动画 */
      @keyframes shimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }

      .skeleton {
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #e0e0e0 50%,
          #f0f0f0 75%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }

      .dark .skeleton {
        background: linear-gradient(
          90deg,
          #2c2c2c 25%,
          #1e1e1e 50%,
          #2c2c2c 75%
        );
      }
    </style>
  </head>

  <body
    class="bg-light-bg text-light-text dark:bg-dark-bg dark:text-dark-text transition-colors duration-300 min-h-screen flex flex-col max-w-screen-md min-w-96 mx-auto"
  >
    <!-- 顶部导航栏 -->
    <header
      class="sticky top-0 z-50 bg-light-card dark:bg-dark-card shadow-sm transition-all duration-300"
    >
      <div
        class="container mx-auto px-4 py-3 flex items-center justify-between"
      >
        <!-- 左侧Logo和名称 -->
        <div class="flex items-center space-x-2">
          <div class="text-primary text-2xl">
            <i class="fa fa-cutlery"></i>
          </div>
          <h1 class="text-xl font-bold text-primary">美团外卖</h1>
        </div>

        <!-- 中间搜索框 -->
        <div class="hidden md:flex flex-1 max-w-md mx-4">
          <div class="relative w-full">
            <input
              type="text"
              placeholder="搜索商家、菜品名称"
              class="w-full py-2 pl-10 pr-4 rounded-full bg-light-bg dark:bg-dark-bg border border-light-border dark:border-dark-border focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
            />
            <i
              class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-light-textTertiary dark:text-dark-textTertiary"
            ></i>
          </div>
        </div>

        <!-- 右侧用户功能区 -->
        <div class="flex items-center space-x-5">
          <!-- 暗黑模式切换按钮 -->
          <button
            id="theme-toggle"
            class="p-2 rounded-full hover:bg-light-bg dark:hover:bg-dark-bg transition-colors"
          >
            <i class="fa fa-moon-o dark:hidden text-xl"></i>
            <i
              class="fa fa-sun-o hidden dark:block text-xl text-yellow-400"
            ></i>
          </button>

          <!-- 购物车 -->
          <div class="relative">
            <button
              class="p-2 rounded-full hover:bg-light-bg dark:hover:bg-dark-bg transition-colors relative"
            >
              <i class="fa fa-shopping-cart text-xl"></i>
              <span
                class="absolute -top-1 -right-1 bg-warning text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
                >3</span
              >
            </button>
          </div>

          <!-- 用户中心 -->
          <button
            class="p-2 rounded-full hover:bg-light-bg dark:hover:bg-dark-bg transition-colors"
          >
            <i class="fa fa-user text-xl"></i>
          </button>
        </div>
      </div>

      <!-- 移动端搜索框 -->
      <div class="md:hidden px-4 pb-3">
        <div class="relative w-full">
          <input
            type="text"
            placeholder="搜索商家、菜品名称"
            class="w-full py-2 pl-10 pr-4 rounded-full bg-light-bg dark:bg-dark-bg border border-light-border dark:border-dark-border focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
          />
          <i
            class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-light-textTertiary dark:text-dark-textTertiary"
          ></i>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-hidden flex flex-col">
      <!-- 分类导航栏 -->
      <div
        class="bg-light-card dark:bg-dark-card border-b border-light-border dark:border-dark-border py-3 overflow-x-auto scrollbar-hide"
      >
        <div class="flex space-x-6 px-4 min-w-max">
          <button class="flex flex-col items-center text-primary font-medium">
            <i class="fa fa-fire text-xl mb-1"></i>
            <span>推荐</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-bolt text-xl mb-1"></i>
            <span>快餐</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-leaf text-xl mb-1"></i>
            <span>奶茶</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-cutlery text-xl mb-1"></i>
            <span>正餐</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-coffee text-xl mb-1"></i>
            <span>咖啡</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-shopping-basket text-xl mb-1"></i>
            <span>生鲜</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-medkit text-xl mb-1"></i>
            <span>药品</span>
          </button>
          <button
            class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
          >
            <i class="fa fa-ellipsis-h text-xl mb-1"></i>
            <span>更多</span>
          </button>
        </div>
      </div>

      <!-- 配送地址和筛选 -->
      <div
        class="bg-light-card dark:bg-dark-card border-b border-light-border dark:border-dark-border py-3 px-4"
      >
        <div class="flex justify-between items-center">
          <div class="flex items-center">
            <i class="fa fa-map-marker text-primary mr-2"></i>
            <div>
              <p class="font-medium">幸福小区</p>
              <p
                class="text-xs text-light-textTertiary dark:text-dark-textTertiary"
              >
                30分钟送达
              </p>
            </div>
          </div>
          <div class="flex space-x-4">
            <button
              class="text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
            >
              <i class="fa fa-filter mr-1"></i>筛选
            </button>
            <button
              class="text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
            >
              <i class="fa fa-sort mr-1"></i>排序
            </button>
          </div>
        </div>
      </div>

      <!-- 商家列表 -->
      <div class="flex-1 overflow-y-auto p-4 space-y-4" id="restaurant-list">
        <!-- 商家1 -->
        <div
          class="bg-light-card dark:bg-dark-card rounded-xl shadow-card dark:shadow-card-dark overflow-hidden card-transition hover:shadow-lg dark:hover:shadow-xl transform hover:-translate-y-1"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/600/200?random=1"
              alt="肯德基餐厅门面照片"
              class="w-full h-40 object-cover"
            />
            <div
              class="absolute top-3 left-3 bg-warning text-white text-xs px-2 py-1 rounded"
            >
              新店特惠
            </div>
            <div
              class="absolute top-3 right-3 bg-white/90 dark:bg-dark-card/90 text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm"
            >
              <i class="fa fa-star mr-1"></i>4.9
            </div>
          </div>

          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="font-bold text-lg">肯德基(KFC幸福路店)</h3>
              <span
                class="text-xs bg-secondary/10 text-secondary px-1.5 py-0.5 rounded"
                >免配送费</span
              >
            </div>

            <div
              class="flex items-center text-sm text-light-textSecondary dark:text-dark-textSecondary mb-3"
            >
              <span class="mr-3">快餐简餐</span>
              <span class="mr-3">|</span>
              <span class="mr-3">30分钟</span>
              <span class="mr-3">|</span>
              <span>¥20起送</span>
            </div>

            <div class="flex flex-wrap gap-2">
              <span
                class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
                >首单减15元</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >满50减10</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >新用户立减8元</span
              >
            </div>
          </div>
        </div>

        <!-- 商家2 -->
        <div
          class="bg-light-card dark:bg-dark-card rounded-xl shadow-card dark:shadow-card-dark overflow-hidden card-transition hover:shadow-lg dark:hover:shadow-xl transform hover:-translate-y-1"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/600/200?random=2"
              alt="星巴克咖啡店门面照片"
              class="w-full h-40 object-cover"
            />
            <div
              class="absolute top-3 left-3 bg-primary text-white text-xs px-2 py-1 rounded"
            >
              热销榜第3
            </div>
            <div
              class="absolute top-3 right-3 bg-white/90 dark:bg-dark-card/90 text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm"
            >
              <i class="fa fa-star mr-1"></i>4.8
            </div>
          </div>

          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="font-bold text-lg">星巴克(中心广场店)</h3>
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-1.5 py-0.5 rounded"
                >配送费¥6</span
              >
            </div>

            <div
              class="flex items-center text-sm text-light-textSecondary dark:text-dark-textSecondary mb-3"
            >
              <span class="mr-3">咖啡饮品</span>
              <span class="mr-3">|</span>
              <span class="mr-3">45分钟</span>
              <span class="mr-3">|</span>
              <span>¥30起送</span>
            </div>

            <div class="flex flex-wrap gap-2">
              <span
                class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
                >满60减15</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >第二杯半价</span
              >
            </div>
          </div>
        </div>

        <!-- 商家3 -->
        <div
          class="bg-light-card dark:bg-dark-card rounded-xl shadow-card dark:shadow-card-dark overflow-hidden card-transition hover:shadow-lg dark:hover:shadow-xl transform hover:-translate-y-1"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/600/200?random=3"
              alt="麦当劳餐厅门面照片"
              class="w-full h-40 object-cover"
            />
            <div
              class="absolute top-3 right-3 bg-white/90 dark:bg-dark-card/90 text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm"
            >
              <i class="fa fa-star mr-1"></i>4.7
            </div>
          </div>

          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="font-bold text-lg">麦当劳(阳光大道店)</h3>
              <span
                class="text-xs bg-secondary/10 text-secondary px-1.5 py-0.5 rounded"
                >免配送费</span
              >
            </div>

            <div
              class="flex items-center text-sm text-light-textSecondary dark:text-dark-textSecondary mb-3"
            >
              <span class="mr-3">快餐简餐</span>
              <span class="mr-3">|</span>
              <span class="mr-3">25分钟</span>
              <span class="mr-3">|</span>
              <span>¥15起送</span>
            </div>

            <div class="flex flex-wrap gap-2">
              <span
                class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
                >满40减8</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >麦辣鸡腿堡套餐¥25</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >新品上市</span
              >
            </div>
          </div>
        </div>

        <!-- 商家4 -->
        <div
          class="bg-light-card dark:bg-dark-card rounded-xl shadow-card dark:shadow-card-dark overflow-hidden card-transition hover:shadow-lg dark:hover:shadow-xl transform hover:-translate-y-1"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/600/200?random=4"
              alt="奶茶店门面照片"
              class="w-full h-40 object-cover"
            />
            <div
              class="absolute top-3 left-3 bg-warning text-white text-xs px-2 py-1 rounded"
            >
              5折起
            </div>
            <div
              class="absolute top-3 right-3 bg-white/90 dark:bg-dark-card/90 text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm"
            >
              <i class="fa fa-star mr-1"></i>4.9
            </div>
          </div>

          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="font-bold text-lg">一点点奶茶(步行街店)</h3>
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-1.5 py-0.5 rounded"
                >配送费¥4</span
              >
            </div>

            <div
              class="flex items-center text-sm text-light-textSecondary dark:text-dark-textSecondary mb-3"
            >
              <span class="mr-3">奶茶饮品</span>
              <span class="mr-3">|</span>
              <span class="mr-3">20分钟</span>
              <span class="mr-3">|</span>
              <span>¥10起送</span>
            </div>

            <div class="flex flex-wrap gap-2">
              <span
                class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
                >满25减10</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >买一送一</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >爆款9.9元</span
              >
            </div>
          </div>
        </div>

        <!-- 商家5 -->
        <div
          class="bg-light-card dark:bg-dark-card rounded-xl shadow-card dark:shadow-card-dark overflow-hidden card-transition hover:shadow-lg dark:hover:shadow-xl transform hover:-translate-y-1"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/600/200?random=5"
              alt="寿司店门面照片"
              class="w-full h-40 object-cover"
            />
            <div
              class="absolute top-3 right-3 bg-white/90 dark:bg-dark-card/90 text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm"
            >
              <i class="fa fa-star mr-1"></i>4.6
            </div>
          </div>

          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="font-bold text-lg">樱花寿司(大学路店)</h3>
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-1.5 py-0.5 rounded"
                >配送费¥5</span
              >
            </div>

            <div
              class="flex items-center text-sm text-light-textSecondary dark:text-dark-textSecondary mb-3"
            >
              <span class="mr-3">日本料理</span>
              <span class="mr-3">|</span>
              <span class="mr-3">35分钟</span>
              <span class="mr-3">|</span>
              <span>¥50起送</span>
            </div>

            <div class="flex flex-wrap gap-2">
              <span
                class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
                >满100减30</span
              >
              <span
                class="text-xs bg-light-border dark:bg-dark-border text-light-textSecondary dark:text-dark-textSecondary px-2 py-0.5 rounded"
                >刺身拼盘特惠</span
              >
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航 -->
    <footer
      class="bg-light-card dark:bg-dark-card border-t border-light-border dark:border-dark-border py-2 px-6"
    >
      <div class="flex justify-around">
        <button class="flex flex-col items-center text-primary">
          <i class="fa fa-home text-xl mb-1"></i>
          <span class="text-xs">首页</span>
        </button>
        <button
          class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
        >
          <i class="fa fa-map-o text-xl mb-1"></i>
          <span class="text-xs">附近</span>
        </button>
        <button
          class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
        >
          <i class="fa fa-th text-xl mb-1"></i>
          <span class="text-xs">发现</span>
        </button>
        <button
          class="flex flex-col items-center text-light-textSecondary dark:text-dark-textSecondary hover:text-primary transition-colors"
        >
          <i class="fa fa-user-o text-xl mb-1"></i>
          <span class="text-xs">我的</span>
        </button>
      </div>
    </footer>

    <!-- 悬浮购物车按钮（移动端） -->
    <div class="fixed bottom-20 right-5 md:hidden z-40">
      <button
        class="bg-primary text-white rounded-full h-14 w-14 flex items-center justify-center shadow-lg relative animate-pulse-slow"
      >
        <i class="fa fa-shopping-cart text-xl"></i>
        <span
          class="absolute -top-1 -right-1 bg-warning text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
          >3</span
        >
      </button>
    </div>

    <script>
      // 暗黑模式切换
      const themeToggle = document.getElementById("theme-toggle");

      // 检查用户偏好或本地存储的主题设置
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }

      // 切换主题
      themeToggle.addEventListener("click", () => {
        if (document.documentElement.classList.contains("dark")) {
          document.documentElement.classList.remove("dark");
          localStorage.theme = "light";
        } else {
          document.documentElement.classList.add("dark");
          localStorage.theme = "dark";
        }
      });

      // 为商家列表添加动画效果
      document.addEventListener("DOMContentLoaded", () => {
        const restaurants = document.querySelectorAll("#restaurant-list > div");
        restaurants.forEach((restaurant, index) => {
          restaurant.style.opacity = "0";
          setTimeout(() => {
            restaurant.classList.add("animate-slide-up");
          }, 100 * index);
        });
      });

      // 滚动时导航栏样式变化
      window.addEventListener("scroll", () => {
        const header = document.querySelector("header");
        if (window.scrollY > 10) {
          header.classList.add("shadow");
        } else {
          header.classList.remove("shadow");
        }
      });
    </script>
  </body>
</html>
